/* Prevence horizontálního scrollbaru + plná šířka banneru */
html {
  overflow-x: hidden;
  scrollbar-gutter: stable; /* Chrome: rezervuje místo pro scrollbar → žádný layout shift */
}

/* ===================================================================
   CLS PREVENCE: pre-rezervace místa pro hero banner + tiles
   Před JS injekcí jsou #brb-hero a #brb-tiles v DOMu nepřítomné →
   content-wrapper by byl nahoře a po injekci by velkou poskočil dolů.
   :not(:has(#brb-hero)) = "banner ještě neexistuje" → přidej margin.
   Jakmile JS vloží banner, selektor přestane platit a margin zmizí BEZ viditeleného shiftu
   (obsah byl po celou dobu "dole" kde má být).
   ================================================================== */
@supports selector(:has(*)) {
  body.type-index:not(:has(#brb-hero)) #content-wrapper {
    margin-top: 1040px;
  }
}
body {
  /* overflow-x odstraněn — pokrývá html pravidlo výše; body overflow-x: hidden může rozbít position:fixed mega panely */
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.overall-wrapper {
  background: #ffffff;
}

/* ── LIGHT MODE: Header & Navigation override ─────────────── */
header#header,
nav#navigation,
.navigation-in,
.navigation-in.menu,
.container.navigation-wrapper,
.top-nav-wrapper,
.header-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: none !important;
}

/* Force nav with higher specificity chain */
body header#header nav#navigation,
body nav#navigation .navigation-in,
body nav#navigation .navigation-in.menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Texty v headeru — tmavé */
header#header .top-nav a,
header#header .top-nav span,
header#header .top-nav-phone,
header#header [data-testid="contactboxPhone"],
nav#navigation .menu-level-1 > li > a {
  color: #1D1D1B !important;
}

/* Odstraní šedé linky nad nav#navigation a nad #products (platform override) */
nav#navigation {
  border-top: none !important;
}
.site-name {
  border-bottom: none !important;
}
#products.products-page.products-block {
  border-top: none !important;
}

/* Ikony košíku, login, search — tmavé */
header#header .btn-icon,
header#header .btn-plain,
header#header [data-testid="linkSearchIcon"],
header#header [data-testid="signin"],
header#header .cart-count {
  color: #1D1D1B !important;
}

/* Hover a active stav — login a košík zčervenají */
header#header .btn.btn-icon.btn-plain.icon-login:hover,
header#header .btn.btn-icon.btn-plain.icon-login:active,
header#header .btn.btn-icon.toggle-window.cart-count:hover,
header#header .btn.btn-icon.toggle-window.cart-count:active {
  color: #D61118 !important;
}

#footer,
#footer .container,
#footer .footer-rows,
#footer .footer-bottom {
  background: #f5f5f5 !important;
}

#footer .copyright,
#footer #signature .title {
  color: #1D1D1B !important;
}

/* Styl pro text "Zvolte variantu:" */
.variant-selector-title {
    font-size: 1.2em; /* Velikost textu */
    font-weight: bold; /* Zvýraznění textu */
    margin-bottom: 10px; /* Odsazení od výběru variant */
    color: #555555; /* Barva textu */
}

/* Barva Kód */
.descr-info-code .p-code {
    color: #0088BF; /* Barva textu */
}

/* Parametry produktu — tmavé hodnoty v td */
.descr-info > table td {
    color: #1D1D1B;
}

.descr-info > table td a {
    color: #1D1D1B;
}

.descr-info .p-code-label {
    color: revert; /* responzivní label "Kód:" — vrátí barvu z Shoptet CDN CSS */
}


/* Skryje text "Zvolte variantu" */
.choose-variant.default-variant {
    display: none !important;
}

/* BARVY NA NÁHLEDU PRODUKTU */
/* Skrývá text variant a styluje kolečka */
/* Základní styl pro kolečka */
.widget-parameter-list .widget-parameter-value a {
    text-indent: -9999px; /* Skryje text */
    display: inline-block; /* Potřebné pro vytvoření kolečka */
    width: 20px; /* Šířka kolečka */
    height: 20px; /* Výška kolečka */
    border-radius: 50%; /* Vytvoří kolečko */
    position: relative; /* Potřebné pro pseudo-elementy */
    border: 1px solid #ccc; /* Volitelný rámeček */
    margin: 5px; /* Přidá mezery mezi kolečky */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Plynulá animace při najetí */
}

/* Barvy koleček podle varianty */
:root {
    --color-cw: #d7ecf9;
    --color-dw: #ffffbb;
    --color-ww: #f9d504;
    --color-red: #F20707;
    --color-orange: #FF9500;
    --color-yellow: #FFFFBB;
    --color-green: #3EC50D;
    --color-eww: #918012;
    --color-blue: #0571FF;
    --color-uv: #7F1AE5;
    --color-grey: #929090;
    --color-bronz: #b9a95b;
    --color-black: #050505;
    --color-white: #ffffff;
    --hover-color: #D61118;
    --transition-default: 0.3s ease;
    --spacing-small: 8px;
}

.widget-parameter-list .widget-parameter-value a[data-value-id="15"] {
    background-color: var(--color-cw);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="18"] {
    background-color: var(--color-dw);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="21"] {
    background-color: var(--color-ww);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="475"] {
    background-color: var(--color-red);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="583"] {
    background-color: var(--color-green);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="655"] {
    background-color: var(--color-blue);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="448"] {
    background-color: var(--color-orange);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="601"] {
    background-color: var(--color-eww);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="3"] {
    background-color: var(--color-grey);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="162"] {
    background-color: var(--color-black);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="805"] {
    background-color: var(--color-bronz);
}
.widget-parameter-list .widget-parameter-value a[data-value-id="1174"] {
    background-color: var(--color-white);
}

/* Zvýraznění kolečka při najetí */
.widget-parameter-list .widget-parameter-value a:hover {
    transform: scale(1.2); /* Zvětší kolečko o 20 % */
    border-color: #1D1D1B; /* Zvýrazní rámeček */
}

/* Skryje název kategorie */
.category-title {
    display: none; /* Skryje prvek z vizuálního zobrazení */
}


/* KATEGORIE ANIMACE V2 */ 
/* Základní styl pro položky seznamu */

.menu-level-1 > li {
    display: inline-block; /* Unified display property */
    /* transition: transform removed — scale(1.1) caused ::after red indicator bleed into neighbors */
    transition: text-decoration var(--transition-default);
}

.menu-level-1 li a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-default), text-decoration var(--transition-default);
}

nav#navigation .menu-level-1 > li > a {
    font-size: 16px;
}

/* transform: scale(1.1) odstraněno — způsobovalo přetékání ::after červeného indikátoru
   (position:absolute, background:#D61118, z CDN CSS) do sousedních položek.
   Hover feedback zůstává přes barvu + podtržení na .menu-level-1 > li:hover a níže. */

.menu-level-1 > li:hover a {
    text-decoration: underline;
    color: var(--hover-color);
}

@media (max-width: 768px) {
    .menu-level-1 li {
        display: block;
        margin-bottom: var(--spacing-small);
    }
}

/* IKONA PŘÍHLÁŠENÍ */
/* Styl pro ikonu přihlášení */
.top-nav-login a {
    transition: transform 0.3s ease, color 0.3s ease; /* Hladká animace pro zvětšení, rotaci a změnu barvy */
    color: inherit; /* Zachování výchozí barvy textu */
}

/* Efekt při najetí myší */
.top-nav-login a:hover {
    transform: scale(1.2) rotate(360deg); /* Zvětšení o 20 % a otočení o 360 stupňů */
    color: #0088bf; /* Správná hexadecimální notace pro modrou barvu */
}


/* ZVĚTŠENÍ LOGA PŘI NAJETÍ MYŠÍ */
/* Styl pro zvětšení loga při najetí myší */
a[data-testid="linkWebsiteLogo"] img {
    transition: transform 0.3s ease;
}

a[data-testid="linkWebsiteLogo"] img:hover {
    transform: scale(1.2);
}
@media (min-width: 768px) {
    a[data-testid="linkWebsiteLogo"] img:hover {
        transform: scale(1.2);
    }
}

/* VYHLEDÁVÁNÍ V2 */

/* Skrytý kontejner pro vyhledávání */
.custom-search-container {
    position: absolute;
    top: 60px; /* Přizpůsobte podle výšky navigace */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    max-width: 400px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Viditelný kontejner */
.custom-search-container.active {
    display: block;
    opacity: 1;
    max-height: 200px;
}

/* Styl formuláře */
.custom-search-form {
    display: flex;
    align-items: stretch;
    border: 1px solid #ccc;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden; /* ✅ drží tvar při focusu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ✅ focus styl na celý "pill" */
.custom-search-form:focus-within{
    border-color: #0088bf;
}

/* Vstupní pole */
.custom-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    border: 0 !important;
    border-radius: 0;            /* ✅ radius už řeší form */
    font-size: 16px;
    color: #333;
    outline: none !important;
    box-shadow: none !important; /* ✅ zruší "oblouk" */
    -webkit-appearance: none;
    appearance: none;
}

/* ✅ pojistka jen pro focus */
.custom-search-input:focus{
    outline: none !important;
    box-shadow: none !important;
}

/* Tlačítko */
.custom-search-button {
    padding: 10px 20px;
    border: 0;
    background-color: #D51118;
    color: #fff;
    cursor: pointer;
    border-radius: 0;            /* ✅ radius už řeší form */
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.custom-search-button:hover {
    background-color: #b00e14;
}



/* VYHLEDÁVÁNÍ DEFAULT NA MOBILECH */
/* Pravidla pro mobilní zařízení (maximální šířka: 768px) */
@media screen and (max-width: 768px) {
    /* Zobrazit výchozí Shoptet vyhledávání */
    .custom-search-container {
        display: none !important;
    }

    .search-window {
        display: block !important;
    }
}

/* Pravidla pro desktopová zařízení (minimální šířka: 769px) */
@media screen and (min-width: 769px) {
    /* Skrýt výchozí Shoptet vyhledávání */
    .search-window {
        display: none !important;
    }

    /* Skrýt vlastní vyhledávací pole (lze aktivovat v JavaScriptu) */
    .custom-search-container {
        display: none;
    }
}


/* Animace textu a čísla v záhlaví + SKRYJE V MOBILU*/
/* Styl pro normální velikost textu */
.project-phone span {
    font-size: 16px; /* Standardní velikost textu */
    transition: font-size 0.3s ease, transform 0.3s ease, font-weight 0.3s ease; /* Plynulý efekt pro zvětšení a změnu stylu */
}


/* Skrýt prvky v mobilním zobrazení */
@media screen and (max-width: 768px) {
    .top-nav img,
    .top-nav a.project-phone {
        display: none; /* Skryje obrázky a telefonní odkazy */
    }
}



/* Výchozí stav všech animovaných prvků - skryté */
[data-testid="linkWebsiteLogo"],
[data-testid="contactboxPhone"],
[data-testid="linkSearchIcon"],
[data-testid="signin"],
.btn.btn-icon.btn-plain.toggle-window.icon-login,
.btn.btn-icon.toggle-window.cart-count,
.btn.btn-icon.toggle-window.menu-trigger,
li.menu-item-674,
li.menu-item-683,
li.menu-item-732,
li.menu-item-735,
li.menu-item-738,
.br-led-poradna-strip {
      opacity: 0; /* Na začátku skryté */
      transition: opacity 1.5s ease-in; /* Hladký přechod */
  }
  
  /* Viditelný stav po animaci */
[data-testid="linkWebsiteLogo"].show,
[data-testid="linkSearchIcon"].show,
[data-testid="signin"].show,
.btn.btn-icon.btn-plain.toggle-window.icon-login.show,
.btn.btn-icon.toggle-window.cart-count.show,
.btn.btn-icon.toggle-window.menu-trigger.show,
li.menu-item-674.show,
li.menu-item-683.show,
li.menu-item-732.show,
li.menu-item-735.show,
li.menu-item-738.show,
.br-led-poradna-strip.show {
      opacity: 1; /* Viditelné po animaci */
  }

  @media (max-width: 1439px) {
    li.menu-item-674,
    li.menu-item-683,
    li.menu-item-732,
    li.menu-item-735,
    li.menu-item-738 {
        opacity: 1 ; /* Vždy viditelné */
    }
}
  
  /* Viditelný stav kontaktu na desktopu */
  @media (min-width: 768px) {
      [data-testid="contactboxPhone"].show {
          opacity: 1;
          display: inline-block; /* Viditelné a zarovnané */
      }
  }
  
  /* Skrytý stav kontaktu na mobilu */
  @media (max-width: 767px) {
      [data-testid="contactboxPhone"] {
          display: none; /* Skryté na mobilu */
      }
  }
  

/* BANNERY VE FOOTERU */
/* Výchozí stav banneru - skrytý */
.custom-footer__banner3,
.custom-footer__banner1,
.custom-footer__banner6,
.footer-icon a[href="https://britrade.cz/"],
.footer-icon a[href="https://www.svitlevne.cz/"],
.copyright,
#signature {
    opacity: 0; /* Na začátku skryté */
    transform: translateY(20px); /* Lehce posunutý dolů pro jemný pohyb */
    transition: opacity 1.5s ease-in, transform 1.5s ease-in; /* Plynulý přechod pro viditelnost a pozici */
}

/* Viditelný stav banneru */
.custom-footer__banner3.show,
.custom-footer__banner1.show,
.custom-footer__banner6.show, 
.footer-icon a[href="https://britrade.cz/"].show,
.footer-icon a[href="https://www.svitlevne.cz/"].show,
.copyright.show,
#signature.show {
    opacity: 1; /* Viditelný */
    transform: translateY(0); /* Návrat na původní místo */
}

/* KATEGORIE V DETAILU PRODUKTU NA STŘED */
@media (min-width: 769px) {
    /* Základní styl pro breadcrumb kontejner */
    .breadcrumbs {
        display: flex; /* Flexbox pro snadné zarovnání */
        justify-content: center; /* Horizontální zarovnání na střed */
        align-items: center; /* Vertikální zarovnání na střed */
        text-align: center; /* Text zarovnaný na střed */
        flex-wrap: wrap; /* Zalomí obsah na více řádků, pokud je potřeba */
        gap: 5px; /* Mezera mezi jednotlivými položkami */
    }

    /* Styl pro jednotlivé prvky breadcrumb */
    .breadcrumbs span {
        display: inline-block; /* Aby se prvky chovaly jako bloky */
        margin: 0 5px; /* Mezery mezi prvky */
        font-size: 14px; /* Základní velikost textu */
        color: #333; /* Barva textu */
    }

    /* Styl pro odkazy v breadcrumb */
    .breadcrumbs a {
        text-decoration: none;
        color: #1D1D1B;
        transition: color 0.3s ease; /* Plynulý přechod při hoveru */
    }

    .breadcrumbs a:hover {
        color: #D61118;
    }

    /* Styl pro navigační tečky (bullets) */
    .breadcrumbs .navigation-bullet {
        margin: 0 5px; /* Vzdálenost od textu */
        color: #D51119;
    }
}

/* Původní styl breadcrumbů na mobilech a tabletech */
@media (max-width: 768px) {
    .breadcrumbs {
        text-align: left; /* Ponechání výchozího zarovnání na mobilu */
    }
}







/* "Do košíku" */
.add-to-cart-button {
    border-radius: 10px;
    border: 2px solid #1D1D1B;
    padding: 10px 20px;
    background-color: transparent;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover and focus effects */
.add-to-cart-button:hover,
.add-to-cart-button:focus {
    background-color: #D61118;
    border-color: #D61118;
    color: white;
    outline: none;
}

/* Focus accessibility */
.add-to-cart-button:focus {
    outline: 2px solid #D61118;
    outline-offset: 4px;
}

/* Product detail – přebarvení "Do košíku" a počtu kusů */
.p-detail-inner .add-to-cart .add-to-cart-button {
    color: #1D1D1B !important;
    border-color: #1D1D1B !important;
}

.p-detail-inner .add-to-cart .add-to-cart-button:hover,
.p-detail-inner .add-to-cart .add-to-cart-button:focus {
    background-color: #1D1D1B !important;
    border-color: #1D1D1B !important;
    color: #ffffff !important;
    outline: none;
}

.p-detail-inner .add-to-cart .add-to-cart-button:focus {
    outline: 2px solid #D61118;
    outline-offset: 4px;
}

/* Počet kusů – tmavé číslo a šipky */
.p-detail-inner .amount {
    color: #1D1D1B;
}

.quantity .amount:focus {
    outline: 2px solid #D61118;
    border-radius: 4px;
    outline-offset: 1px;
}

.p-detail-inner .quantity .increase,
.p-detail-inner .quantity .decrease {
    color: #1D1D1B;
}

.p-detail-inner .quantity .increase__sign,
.p-detail-inner .quantity .decrease__sign {
    color: #1D1D1B;
}


/* Deaktivace hover efektu u obrázků produktů v kategorii */
#products .product .img img:hover {
    transform: none; /* Žádný efekt */
    transition: none; /* Žádný přechod */
}


/* Záložky "Související" a "Podobné" – tmavé názvy produktů */
.products-additional .product a.name {
    color: #1D1D1B;
}

.products-additional .product a.name:hover {
    color: #D61118;
}


/* Diskuze – tmavý text, červené odkazy, ghost tlačítko */
#productDiscussion [data-testid="textCommentNotice"] {
    color: #1D1D1B;
}

#productDiscussion label.whole-width {
    color: #1D1D1B;
}

#productDiscussion label.whole-width a {
    color: #D61118;
}

#productDiscussion [data-testid="buttonSendComment"] {
    background: transparent;
    border: 2px solid #1D1D1B;
    color: #1D1D1B;
    box-shadow: none;
    border-radius: 6px;
}

#productDiscussion [data-testid="buttonSendComment"]:hover {
    background: #1D1D1B;
    border-color: #1D1D1B;
    color: #ffffff;
}


/* Košík & ordering process → viz css/kosik.css */

.radio-wrapper label:hover .shipping-billing-name {
    transform: scale(1.1); /* Jemné zvětšení */
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease; /* Plynulý přechod */
    display: inline-block;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); /* Jemný stín přímo na text */
}

.radio-wrapper .shipping-billing-name {
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease; /* Připraveno na návrat do původního stavu */
}


/* Odstranění odsazení z dokumentů produktů */
#relatedFiles li {
    list-style-type: none; /* Odstraní marker */
  }

  .shp-tabs-holder {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* DŮLEŽITÉ: Vynutíme zarovnání doleva */
  }
  
  .chat-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* DŮLEŽITÉ: Zarovnání tlačítka doleva */
    width: 100%;
    margin-top: 2px; /* Přidání mezery pod seznam */
  }
  
  .link-icon.chat {
    display: flex;
    flex-direction: column;
    align-items: center; /* Stále držíme ikonku a text na středu */
    text-align: center;
    margin-top: 2px; /* Přidání mezery pod seznam */
    font-size: 16px;
    position: relative;
  }
  
  .link-icon.chat span {
    display: block;
    text-align: center;
    width: 100%;
  }
  
  @media (max-width: 767px) {
    .chat-wrapper {
      margin-left: 30px !important; /* Posune tlačítko doprava o 20px */
    }
  }
  
  @media (max-width: 479px) {
    .chat-wrapper {
      margin-left: 2px !important; /* Posune tlačítko doprava o 20px */
    }
  
    .col-sm-3.shp-tabs-row {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .shp-tabs-holder {
    align-items: center !important;
    text-align: center !important;
  }

  .shp-tab-link {
    text-align: center !important;
    justify-content: center;
    display: inline-flex;
  }

  .chat-wrapper {
    text-align: center !important;
    align-items: center !important;
  }
}



/* Zarovnání breadcrumb navigace na střed */
/* CDN mobile-header CSS nastavuje .breadcrumbs { margin-top: 18px } → přebíjíme */
.breadcrumbs.navigation-home-icon-wrapper {
    display: flex;
    justify-content: center; /* Horizontální zarovnání na střed */
    align-items: center; /* Vertikální zarovnání */
    flex-wrap: wrap; /* Přizpůsobení menším obrazovkám */
    text-align: center; /* Zarovnání textu */
    gap: 1px; /* Odsazení mezi prvky */
    margin-top: 6px;    /* desktop: override CDN 18px → malá mezera */
    margin-bottom: 6px; /* konzistentní mezera před .content-wrapper-in */
}

/* Mobil + tablet: breadcrumbs trochu níž */
@media (max-width: 1024px) {
    .breadcrumbs.navigation-home-icon-wrapper {
        margin-top: 24px;
    }
}

/* Styl pro všechny <span> uvnitř .breadcrumbs.navigation-home-icon-wrapper */
.breadcrumbs.navigation-home-icon-wrapper span {
    background-color: transparent;
    color: #1D1D1B;
    padding: 1px 1px; /* Snížení vnitřního odsazení */
    position: relative;
    z-index: 1;
    margin: 0 1px; /* Snížení mezery mezi prvky */
    display: flex;
    align-items: center;
}

/* Styl pro odkazy uvnitř breadcrumbs */
.breadcrumbs.navigation-home-icon-wrapper a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 0 3px;
}

/* Styl pro span, který obsahuje název */
.breadcrumbs.navigation-home-icon-wrapper a span[itemprop="name"] {
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
    margin: 0 3px; /* Zmenšení mezery kolem názvů */
}

/* Efekt hover pro odkazy uvnitř span */
.breadcrumbs.navigation-home-icon-wrapper a span[itemprop="name"]:hover {
    color: #D61118;
    transform: scale(1.1);
}

/* Poslední breadcrumb položka (bez odkazu) */
.breadcrumbs.navigation-home-icon-wrapper span[itemprop="name"] {
    color: #1D1D1B;
}

/* Styl pro oddělovač "/" mezi navigačními prvky */
.breadcrumbs.navigation-home-icon-wrapper .navigation-bullet {
    color: #D51119;
    font-weight: bold;
    padding: 0 10px; /* Menší mezera kolem oddělovače */
    margin: 0 2px;
}

/* Název produktu — vždy tmavý */
.p-detail .col-md-4 h1 {
    color: #1D1D1B;
}

.col-xs-6.col-sm-6.col-lg-3.col-xl-3 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zajištění, že vše bude na středu */
  }
  
  .image {
    display: flex;
    justify-content: center; /* Zarovnání obrázku na střed */
    width: 100%;
  }
  
  .image img {
    max-width: 100%; /* Zabrání přesahu */
    height: auto;
  }

@media (min-width: 992px){
  #navigation-first{
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
  }
}
@media (max-width: 991.98px){
  #navigation-first{
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
  }
}


    /* odsazení počtu kusů */
.quantity .amount {
    width: 39px;    
 }



/* Styl pro logo */
img[src="https://www.briled.cz/user/documents/upload/Obrázky kategorie/BRILED full final 2025 (black).png"] {
    width: 350px;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Quantity widget na mobilu */
@media (max-width: 480px) {
    .quantity {
        border: 2px solid #D61118;
        border-radius: 8px;
        overflow: hidden;
    }

    .quantity .increase,
    .quantity .decrease {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 42px;
        border: 1.5px solid #1D1D1B;
        border-radius: 5px;
        cursor: pointer;
        outline: none;
    }

    .quantity .increase:hover,
    .quantity .decrease:hover,
    .quantity .increase:active,
    .quantity .decrease:active,
    .quantity .increase:focus,
    .quantity .decrease:focus {
        background-color: transparent;
        outline: none;
        box-shadow: none;
    }

    .quantity .amount:focus {
        outline: none;
        box-shadow: none;
    }
}

/* Product name center on mobile */
@media (max-width: 480px) {
    .col-md-4 h1 {
        text-align: center;
    }
}

/* Descr-text block */
.descr-text {
    max-width: 900px;
    margin: auto;
    font-family: Arial, sans-serif;
    color: #1D1D1B;
}

.descr-text h2, .descr-text h3 {
    color: #1D1D1B !important;
    text-align: left;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.descr-text h2::after, .descr-text h3::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #3381C3;
    margin-top: 5px;
    transition: width 0.3s ease-in-out;
}

.descr-text h2:hover::after, .descr-text h3:hover::after {
    width: 100px;
}

.descr-text .section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-in-out forwards;
}

.descr-text img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, filter 0.4s ease-in-out;
}

/* Obrázek hover efekt */
.descr-text img:hover {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.descr-text .divider {
    border-bottom: 3px solid #e0e0e0;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.descr-text .divider::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, #ff9800, transparent);
    position: absolute;
    top: 0;
    left: -100%;
    animation: slideIn 1s ease-in-out forwards;
}

/* Přepis inline stylů color:#333 v HTML popisu produktu */
.descr-text p,
.descr-text li,
.descr-text strong,
.descr-text em,
.descr-text span {
    color: #1D1D1B !important;
}

@media (max-width: 768px) {
    .descr-text .section {
        flex-direction: column;
        text-align: center;
    }
    .descr-text img {
        max-width: 100%;
    }
}

/* Animace */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { left: -100%; }
    to { left: 100%; }
}

@media screen and (max-width: 768px) {
    .mobile-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 10px 0;
        background-color: #ffffff;
        padding: 8px 0 10px;
    }

    .container.navigation-wrapper {
        background: #ffffff !important;
    }

    .mobile-header-wrapper h1.site-name {
        margin: 0;
        text-align: center;
    }

    .mobile-icon-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mobile-icon-row li {
        display: inline-flex;
    }

    .mobile-icon-row li a,
    .mobile-icon-row li button {
        color: #1D1D1B !important;
    }

    .mobile-header-wrapper a[data-testid="linkWebsiteLogo"] {
        display: block;
        width: 100%;
        text-align: center;
    }

    .mobile-header-wrapper a[data-testid="linkWebsiteLogo"] img {
        max-width: 140px !important;
        width: 55% !important;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
  .custom-mobile-slider {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 55px 12px 24px; /* sníženo kvůli headru */
    flex-wrap: nowrap;
    overflow-x: hidden;
    text-align: center;
  }

  .rotating-product {
    width: 48%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }

  .rotating-product .image {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
  }

  .rotating-product img {
    max-height: 100px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }

  .rotating-product .p-desc,
  .rotating-product .p-tools,
  .rotating-product .quantity,
  .rotating-product .p-code {
    display: none !important;
  }

  .rotating-product .availability {
    color: #009901;
    font-weight: 500;
    margin: 4px 0;
  }

  .rotating-product .availability-amount {
    display: inline;
    font-weight: normal;
    color: #009901;
    margin-left: 4px;
  }

  .rotating-product .price-final,
  .rotating-product .price-final strong {
    color: #3281C4 !important;
    font-weight: bold;
  }

  .rotating-product .price-additional {
    color: #999;
    font-size: 12px;
  }

  .rotating-product .product-link {
    margin-top: 16px; /* větší mezera od ceny */
    background-color: #0070c9;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    font-weight: bold;
  }

  .rotating-product .product-link:hover {
    background-color: #005aa7;
  }

  .mobile-header-wrapper {
    z-index: 100;
    margin-bottom: 16px;
  }

  .container.navigation-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .top-nav {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  .rotating-product .name span {
    color: #999 !important;
  }
}

 @media screen and (max-width: 768px) {
  .led-pasky-banner {
    margin: 24px 16px 32px; /* poslední hodnota = mezera pod každým bannerem */
  padding: 20px 24px;
  background: linear-gradient(135deg, #ffffff, #f3f6f9);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* <- nahrazeno, stejně jako rotating-product */
  position: relative;
  overflow: hidden;
  }

  .led-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
  }

.led-content.reverse {
  flex-direction: row-reverse;
  text-align: right;
}
.led-content.reverse .led-text {
  text-align: right;
}

  .led-text h2 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin: 0 0 8px;
  }

  .led-text p {
    color: #555;
    font-size: 14px;
    margin: 0 0 14px;
  }

  .led-text a {
  display: inline-block;
  padding: 10px 20px;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(26, 115, 232, 0.25);
  transition: background 0.3s ease;
  white-space: nowrap; /* <- Přidat */
}

  .led-text a:hover {
    background: #125ecf;
  }

  .led-img img {
    height: 120px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
  }

  .led-img.second img {
  height: 120px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

 .led-img.third img {
  height: 180px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.led-img.fourth img {
  height: 180px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

  .led-img img:hover {
    transform: scale(1.05);
  }

  /* Jemné světelné pozadí za obrázkem */
  .led-pasky-banner::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
  }
}


/* TMAVÝ REŽIM PRO TELEFONY NA KATEGORII A HLAVIČKU */
@media screen and (max-width: 768px) and (prefers-color-scheme: dark) {
  /* === Bannery === */
  .led-pasky-banner {
    background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* stejně jako rotating-product v tmavém */
  }

  .led-text h2,
  .led-text p {
    color: #f0f0f0;
  }

  .led-text a {
    background: #3399ff;
    color: #fff;
    box-shadow: 0 4px 10px rgba(51, 153, 255, 0.3);
  }

  .led-text a:hover {
    background: #1a73e8;
  }

  .led-img img {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,255,255,0.15));
  }


  /* === Rotující produkty === */
  .rotating-product {
    background: #2a2a2a;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }

  .rotating-product .availability,
  .rotating-product .availability-amount {
    color: #6dd76d;
  }

  .rotating-product .price-final,
  .rotating-product .price-final strong {
    color: #7dbbff !important;
  }

  .rotating-product .price-additional {
    color: #aaa;
  }

  .rotating-product .product-link {
    background-color: #3399ff;
    color: #fff;
  }

  .rotating-product .product-link:hover {
    background-color: #1a73e8;
  }
}

/* Zmenšení obrázků a textů v subkategoriích */
/* === ZMENŠENÍ OBRÁZKŮ A MEZER V SUBKATEGORIÍCH === */

   
@media (min-width: 1008px) {
  .subcategories.with-image {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.subcategories.with-image li {
    flex: 0 1 12%;
    margin: 1px !important;
    padding: 2px;
    text-align: center;
}

.subcategories.with-image .image img {
    height: 70px; /* pevná výška = všechny stejné velikosti */
    width: auto;
    object-fit: contain; /* zachová proporce (není nutné, ale jistota) */
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.subcategories.with-image a {
    padding: 0;
    margin: 0;
    display: block;
}

.subcategories.with-image .text {
    margin-top: 1px;
    display: block;
    line-height: 1;
}

.subcategories.with-image li.col-xs-6,
.subcategories.with-image li.col-sm-6,
.subcategories.with-image li.col-lg-3,
.subcategories.with-image li.col-xl-3 {
    width: auto !important;
    flex: 0 1 8% !important;
    padding: 0 !important;
    box-sizing: border-box;
}
}



@media (max-width: 767px) {
    .price-final,
    .price-additional,
    .order-availability {
        text-align: center !important;
        display: block;
        width: 100%;
    }

    .availability {
        display: inline-block;
    }
}

/* Tmavá barva počtu kusů na detailu produktu */
.p-detail-inner .availability-amount {
    color: #1D1D1B;
}

@media (max-width: 767px) {
    .add-to-cart {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .add-to-cart .quantity {
        order: 1;
        text-align: center;
    }

    .add-to-cart .btn-cart.add-to-cart-button {
        order: 2;
        margin: 0 auto;
    }

    .add-to-cart .btn-conversion.add-to-cart-button {
        display: none !important; /* skryje desktopové tlačítko na mobilu */
    }

    .add-to-cart .btn-cart.add-to-cart-button {
        display: block !important;
    }
}

@media (max-width: 767px) {
  #relatedFiles {
    text-align: center;
    padding-left: 0; /* odstraní odsazení seznamu */
    list-style: none; /* odstraní puntík, pokud se zobrazoval */
  }

  #relatedFiles li {
    display: inline-block;
  }
}


/* === CLS FIXES === */

/* Rezervace místa pro welcome-wrapper - ZAKOMENTOVÁNO
.welcome-wrapper {
  min-height: 120px;
}
*/

/* Rezervace místa pro obrázky produktů */
#products .product .img img,
.products .img img {
  aspect-ratio: 4/3; /* uprav podle skutečného poměru tvých produktových fotek */
  width: 100%;
  height: auto;
  display: block;
}

/* Fonty – zabránění skákání textu (CLS fix)
   size-adjust přiblíží fallback font (Arial) k rozměrům Exo-2 → minimalizuje layout shift při swapu.
   Pokrýváme i váhy 300 a 500, které načítá Shoptet a způsobovaly CLS 0.685. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  size-adjust: 97%;
  ascent-override: 95%;
  src: url('https://cdn.myshoptet.com/usr/fonts/exo-2/exo-2-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 97%;
  ascent-override: 95%;
  src: url('https://cdn.myshoptet.com/usr/fonts/exo-2/exo-2-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  size-adjust: 97%;
  ascent-override: 95%;
  src: url('https://cdn.myshoptet.com/usr/fonts/exo-2/exo-2-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  size-adjust: 97%;
  ascent-override: 95%;
  src: url('https://cdn.myshoptet.com/usr/fonts/exo-2/exo-2-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  size-adjust: 97%;
  ascent-override: 95%;
  src: url('https://cdn.myshoptet.com/usr/fonts/exo-2/exo-2-700.woff2') format('woff2');
}

/* KATEGORIE – 3 stejné sloupce (desktop) + highlight jako normální karta */
@media (min-width: 992px) {
  @supports (display: grid) {

    body.type-category #products.products-page.products-block {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-flow: row dense;
      gap: 30px;
    }

    body.type-category #products.products-page.products-block > .product {
      float: none !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      clear: none !important;
      min-width: 0;
    }

    /* zrušit "široký" highlight -> vždy jen 1 sloupec */
    body.type-category #products.products-page.products-block > .product.highlight-product,
    body.type-category #products.products-page.products-block > .product.col-md-8 {
      grid-column: span 1 !important;
    }

    /* odstranit bootstrap/shoptet clear prvky mezi položkami */
    body.type-category #products.products-page.products-block > .clearfix,
    body.type-category #products.products-page.products-block > .clear {
      display: none !important;
    }

    /* ====== sjednocení vzhledu highlightu na standardní kartu ====== */
    body.type-category #products.products-page.products-block > .product.highlight-product {
      display: block !important;
      position: relative;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product::after {
      display: none !important;
    }

    /* highlight bývá dělaný jako 2-sloupcový/flex -> reset na "stack" */
    body.type-category #products.products-page.products-block > .product.highlight-product .inner {
      display: block !important;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product .img,
    body.type-category #products.products-page.products-block > .product.highlight-product .descr {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    /* u highlightu máš v HTML col-lg-6 -> na úzké kartě to dělá divně */
    body.type-category #products.products-page.products-block > .product.highlight-product .prices > [class*="col-"] {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }


    /* ==========================================================
       HIGHLIGHT: název + popisek + ceny + košík POD SEBE a na střed
       ========================================================== */

    /* celý popis (name + short-descr + prices) na střed */
    body.type-category #products.products-page.products-block > .product.highlight-product .descr{
      text-align: center;
    }

    /* název jako blok */
    body.type-category #products.products-page.products-block > .product.highlight-product .descr a.name{
      display: block;
    }

    /* popisek */
    body.type-category #products.products-page.products-block > .product.highlight-product .short-descr{
      margin: 8px 0 10px;
    }

    /* z .prices.row udělej sloupec */
    body.type-category #products.products-page.products-block > .product.highlight-product .prices.row{
      display: flex !important;
      flex-direction: column;
      align-items: center;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* zruš bootstrap sloupce uvnitř prices (col-*) */
    body.type-category #products.products-page.products-block > .product.highlight-product .prices.row > [class*="col-"]{
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: center;
    }

    /* cenové bloky */
    body.type-category #products.products-page.products-block > .product.highlight-product .price-additional{
      margin-top: 6px;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product .price.price-final{
      margin-top: 4px;
    }

    /* košík a dostupnost vycentrovat */
    body.type-category #products.products-page.products-block > .product.highlight-product .tools-wrap{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product .tools,
    body.type-category #products.products-page.products-block > .product.highlight-product form.pr-action{
      display: flex;
      justify-content: center;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product .add-to-cart-button{
      margin-top: 6px;
    }

    body.type-category #products.products-page.products-block > .product.highlight-product .availability{
      text-align: center;
      margin-top: 8px;
    }

    /* (volitelné) ten "neviditelný" odkaz na desktopu může překážet */
    body.type-category #products.products-page.products-block > .product.highlight-product .product-link.visible-lg-inline{
      display: none !important;
    }

  }
}

/* MOBIL: "Přihlášení" jako stejná ikona (shoptet) jako na desktopu */
@media (max-width: 768px) {
  [data-testid="signin"]{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
  }

  /* schovat text */
  [data-testid="signin"] > span{
    display: none !important;
  }

  /* ikonka */
  [data-testid="signin"]::before{
    content: "\e922";
    font-family: shoptet !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* === Mega dropdown (fixed + centered + smooth) === */
@media (min-width: 1025px){
  /* === Stacking context headeru: sníženo z 4000 → 100 (root cause fix).
     Header nepotřebuje být nad modaly/widgety.
     Mega panel (.mega-panel) má vlastní z-index: 5000 a je body-level (position:fixed).
     Shoptet cart widget má výchozí z-index ~1200 → přirozeně nad headerem 100. === */
  #header { position: relative; z-index: 100; }

  /* === Redukce mezery pod headerem.
     CDN stylesheet (CORS blocked) nastavuje #header { margin-bottom: 40px }.
     Na desktopu je #header position:relative (viz výše) → margin-bottom je v flow
     a vytváří 40px mezeru mezi headerem a #content-wrapper (tedy nad breadcrumbs).
     Přepíšeme na 8px pro vizuální dýchání bez zbytečného gappu. === */
  #header { margin-bottom: 8px; }

  .navigation-wrapper,
  #navigation {
    position: relative;
    overflow: visible !important;
    z-index: 100;
  }

  /* Clip horizontal overflow here to prevent page-width jumps.
     Mega panels are position:fixed (appended to body) – not clipped by this. */
  #navigation .navigation-in.menu {
    position: relative;
    overflow: visible !important;
    overflow-x: clip !important;
    z-index: 100;
    display: block !important;
    width: 100% !important;
  }

  /* === MEGA DROPDOWN CSS DOČASNĚ VYPNUTO — odkomentuj pro obnovení ===

  .mega-parent { position: static; }

  .mega-panel{
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(8px);
    width: clamp(320px, 92vw, 1100px);
    max-width: 100vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5000;
    will-change: transform, opacity;
    transition: opacity .18s ease, transform .18s ease;
  }

  .mega-panel.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }

.mega-inner{
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 12px 14px;
}

.mega-content{ max-width: 980px; margin: 0 auto; }

.mega-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 10px;
}

.mega-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mega-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  border-color: #cfd8e3;
}

.mega-tile img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.mega-all{
  display: block;
  width: fit-content;
  margin: 8px 0 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed #DADDE2;
  color: var(--color-primary, #3381C3);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width:1024px){
  .mega-panel{ display:none !important; }
}

.mega-panel:has(.mega-grid > .mega-tile:only-child) {
  width: auto;
}

.mega-panel:has(.mega-grid > .mega-tile:only-child) .mega-inner {
  padding: 6px 8px;
}

.mega-panel:has(.mega-grid > .mega-tile:only-child) .mega-content {
  max-width: none;
}

.mega-panel:has(.mega-grid > .mega-tile:only-child) .mega-grid {
  gap: 0;
  display: block;
}

.mega-panel:has(.mega-grid > .mega-tile:only-child) .mega-tile {
  padding: 6px 10px;
  border: 0;
  box-shadow: none;
  font-weight: 500;
}
=== konec MEGA DROPDOWN CSS */

  /* MEGA DROPDOWN — oprava klidového stavu
     CSS blok výše je komentovaný (dočasně vypnuto), ale JS (initMegaDropdown
     ve VSE V94.js) panely stále vytváří a appenduje do body.
     Bez těchto pravidel mají .mega-panel position:static → renderují se pod footerem.
     Tato pravidla obnoví správný skrytý stav; jsou kompatibilní s is-open logikou v JS. */
  .mega-panel {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    width: clamp(320px, 92vw, 1100px) !important;
    max-width: 100vw !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 5000 !important;
  }
  .mega-panel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
  }


/* jen homepage; když by class "homepage" chyběla, klidně přidej i body */
/* Homepage (Shoptet) – vypnout horizontal scroll */
body.type-index { overflow-x: hidden; }
@supports (overflow: clip){
  body.type-index { overflow-x: clip; }
}

/* pojistka proti přetékajícím obrázkům */
img, svg { max-width: 100%; height: auto; }
}

/* MEGA DROPDOWN VYPNUTO — duplikát @media pro .mega-panel zakomentován
@media (max-width: 1024.98px){
  .mega-panel{ display:none !important; }
}
*/

/* MEGA DROPDOWN — mobilní pojistka: JS panely na mobilu odstraní, ale pro jistotu */
@media (max-width: 1024px) {
  .mega-panel { display: none !important; }
}

/* Stavy mega panelu jsou definovány v @media (min-width: 1025px) bloku výše — globální duplikáty odstraněny */

/* === Search overlay musí být vždy nad mega panelem === */
.content-window.search-window{
  position: fixed;
  z-index: 999999;
}

/* (doporučeno) i tvůj custom search ať je vždy nad vším */
#custom-search-container,
.custom-search-container{
  position: fixed;
  z-index: 999999;
}

/* === FALLBACK (nyní redundantní): po snížení headeru na 100 je Shoptet cart widget
   (~1200 výchozí) přirozeně nad headerem bez tohoto pravidla.
   Ponecháno jako pojistka — smazat pokud žádné problémy po 2 týdnech testování. */
/* #cart-widget.content-window.cart-window { z-index: 4500 !important; } */

/* ================================
   /clanky-2/, /realizace/, /temata/
   Skrytí nadpisů (sectionDescription)
=================================== */
body.br-page-clanky-2 .sectionDescription,
body.br-page-realizace .sectionDescription,
body.br-page-temata .sectionDescription{
  display: none !important;
}


/* =========================================
   /clanky-2/ – subkategorie jako CTA tlačítka
   bez teček / bez odsazení / text bílý hned
========================================= */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* pojistka na pseudo-elementy na UL */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta::before,
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta::after{
  content: none !important;
  display: none !important;
}

body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta > li{
  list-style: none !important;
  margin: 0 !important;

  /* Bootstrap col-* dělá odsazení (gutter) */
  padding-left: 0 !important;
  padding-right: 0 !important;

  float: none !important;
  width: auto !important;

  background: none !important;
  background-image: none !important;
}

/* zruš tečky/odrážky ze všech možných zdrojů */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta > li::marker{
  content: "" !important;
}
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta > li::before,
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta > li::after{
  content: none !important;
  display: none !important;
}

/* CTA odkazy: text bílý hned (ne až hover) */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta a.br-led-poradna-cta,
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta a.br-led-poradna-cta:visited{
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* span.text uvnitř */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta a.br-led-poradna-cta .text,
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta a.br-led-poradna-cta:hover .text{
  color: #fff !important;
  font-weight: 700;
}

/* pojistka: kdyby někde zůstala šipka */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta .br-cta-arrow{
  display: none !important;
}

/* /clanky-2/ – zarovnání názvu článku do středu */
body.br-page-clanky-2 a.title[data-testid="textArticleTitle"]{
  display: block;          /* aby fungovalo text-align */
  width: 100%;
  text-align: center;
}

/* /clanky-2/ – buttonky níže pod "Články" */
body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta{
  margin-top: 14px !important;  /* posun dolů od nadpisu "Články" */
}

/* /clanky-2/ – na desktopu zvětšit buttony o ~20–30 % */
@media (min-width: 992px){
  body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta{
    gap: 20px; /* aby měly víc místa */
  }

  body.br-page-clanky-2 ul.subcategories.br-subcats-as-cta a.br-led-poradna-cta{
    font-size: 1.25em !important;     /* +25 % */
    padding: 14px 26px !important;    /* větší "tlačítko" */
  }
}

/* ================================================
   DESKTOP HEADER – logo vlevo | telefon+search střed | login+košík vpravo
================================================= */
@media (min-width: 769px) {

  .br-hidden-topnav {
    display: none !important;
  }

  .site-name {
    display: none !important;
  }

  /* === HEADER === */
  .br-main-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 32px 14px;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    --br-mh-divider-left: 32px;
    --br-mh-divider-right: 32px;
  }

  .br-main-header::after {
    content: '';
    position: absolute;
    left: var(--br-mh-divider-left);
    right: var(--br-mh-divider-right);
    bottom: 0;
    height: 1px;
    background: #E0E0E0;
    pointer-events: none;
  }

  /* Hlavní řada: logo + search + akce */
  .br-mh-row {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  /* Logo vlevo */
  .br-mh-logo {
    flex: 0 0 auto;
    margin-left: var(--br-mh-logo-offset, 0px);
    margin-top: 4px;
  }

  .br-mh-logo a[data-testid="linkWebsiteLogo"] img {
    width: 160px !important;
    height: auto !important;
    margin: 0 !important;
    display: block;
  }

  /* Střed: jen hledání */
  .br-mh-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 380px;
    margin: 0 auto;
  }

  .br-mh-phone {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 6px;
    justify-content: flex-start;
    box-sizing: border-box;
    background: #1D1D1B;
    border-radius: 6px;
    padding: 6px 18px;
  }

  header#header .br-mh-box-1,
  header#header .br-mh-box-2 {
    display: flex;
    box-sizing: border-box;
  }

  header#header .br-mh-box-1 {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  header#header .br-mh-box-2 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  header#header .br-mh-box-1 > span:first-child {
    white-space: nowrap;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
  }

  header#header .br-mh-phone a.project-phone {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    opacity: 1 !important;
  }

  header#header .br-mh-phone .phone-hours {
    white-space: nowrap;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400;
  }

  header#header .br-mh-box-1 .phone-hours::before,
  header#header .br-mh-box-2 .phone-b2b::before,
  header#header .br-mh-box-2 .phone-blog::before {
    content: ' | ';
    color: #fff;
    margin: 0 6px;
  }

  header#header .br-mh-phone .phone-store,
  header#header .br-mh-phone .phone-b2b,
  header#header .br-mh-phone .phone-blog {
    white-space: nowrap;
    color: #fff !important;
    font-size: 14px;
    font-weight: 400;
  }

  /* Search – jemnější */
  .br-mh-search {
    width: 100%;
  }

  .br-mh-search #custom-search-container,
  .br-mh-search .custom-search-container {
    position: static !important;
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: auto !important;
  }

  .br-mh-search .custom-search-form {
    border-radius: 20px;
    border: 1.5px solid #d8d8d8;
    overflow: hidden;
    display: flex;
    width: 100%;
    transition: border-color 0.2s;
  }

  .br-mh-search .custom-search-form:focus-within {
    border-color: #D61118;
  }

  .br-mh-search .custom-search-input {
    flex: 1;
    padding: 7px 12px;
    font-size: 13px;
    border: none !important;
    outline: none !important;
    background: transparent;
  }

  .br-mh-search .custom-search-button {
    padding: 7px 16px;
    background: #D61118;
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 0 20px 20px 0;
    white-space: nowrap;
  }

  .br-mh-search .custom-search-button:hover {
    background: #b00e14;
  }

  /* Akce vpravo: login + košík */
  .br-mh-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 25px;
  }

  .br-mh-actions li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Skrýt text "Prázdný košík" */
  .br-mh-actions .cart-price {
    display: none !important;
  }

  /* Sjednotit velikost ikon login + košík */
  .br-mh-actions .btn-icon,
  .br-mh-actions .cart-count {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    padding: 0 !important;
    color: #1D1D1B !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
  }

  .br-mh-actions .btn-icon:hover,
  .br-mh-actions .cart-count:hover,
  a[data-testid="headerCart"]:hover,
  a[data-testid="headerCart"]:active {
    color: #D61118 !important;
  }

  /* SVG ikona košíku — pokud je renderována jako inline SVG */
  a[data-testid="headerCart"]:hover svg,
  a[data-testid="headerCart"]:active svg {
    fill: #D61118 !important;
    color: #D61118 !important;
  }

  /* Shoptet ikona přes ::before (icon font) */
  a[data-testid="headerCart"]:hover::before,
  a[data-testid="headerCart"]:hover::after,
  a[data-testid="headerCart"]:active::before,
  a[data-testid="headerCart"]:active::after {
    color: #D61118 !important;
  }

  /* === NAVIGACE === */
  /* Shoptet CDN sets navigation-in.menu to position:absolute (top:0) below 1025px,
     which bypasses nav padding. Force relative so padding creates correct spacing. */
  nav#navigation .navigation-in.menu {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    overflow: visible !important;
    overflow-x: clip !important;
    display: block !important;
  }

  nav#navigation .menu-level-1 {
    width: 100% !important;
  }

  /* Padding místo transform – mega panel bude správně zarovnaný */
  nav#navigation {
    padding: 10px 0 0px;
    margin-left: 0;
    width: 100%;
    height: auto !important;
    box-sizing: content-box;
    position: relative;
    overflow: visible;
    isolation: isolate;
    --br-nav-divider-left: 0px;
    --br-nav-divider-right: 0px;
  }

  nav#navigation::after {
    content: none;
  }

  body:not(.type-index) nav#navigation::after {
    content: none !important;
  }

  body:not(.type-index) #content-wrapper::before {
    content: none !important;
  }

  body:not(.type-index) #header::after {
    content: '';
    position: absolute;
    left: var(--br-menu-divider-left, 32px);
    right: var(--br-menu-divider-right, 32px);
    bottom: 8px;
    height: 1px;
    background: #E0E0E0;
    pointer-events: none;
    z-index: 101;
  }

  nav#navigation .menu-level-1 {
    border-bottom: none;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Nav item – spacing, font */
  nav#navigation [data-testid="headerMenuItem"] {
    display: block;
    padding: 8px 9px !important;
    color: #fff !important;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: color 0.15s;
  }

  /* Tenký oddělovač mezi položkami */
  nav#navigation .menu-level-1 > li + li {
    border-left: 1px solid #e0e0e0;
  }

  /* Animovaná červená čára pod položkou — roste od středu */
  nav#navigation .menu-level-1 > li {
    position: relative;
  }

  nav#navigation .menu-level-1 > li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: #D61118;
    border-radius: 1px;
    transition: left 0.22s ease, right 0.22s ease;
  }

  nav#navigation .menu-level-1 > li:hover::after,
  nav#navigation .menu-level-1 > li.active::after {
    left: 0;
    right: 0;
  }

  /* Hover: červená barva + jemný tint pozadí */
  nav#navigation .menu-level-1 > li:hover {
    background: rgba(213, 17, 24, 0.04);
  }

  nav#navigation [data-testid="headerMenuItem"]:hover,
  nav#navigation [data-testid="headerMenuItem"]:focus {
    color: #D61118 !important;
    background: transparent !important;
  }

  /* Fix: Shoptet collapsible sets large inline width on ul – override it */
  nav#navigation .menu-level-1 {
    width: 100% !important;
  }

  /* Force všechny nav položky viditelné – Shoptet overflow override */
  nav#navigation .menu-level-1 > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
  }

  nav#navigation .menu-level-1 > li > a {
    white-space: nowrap;
  }
  /* Skrýt Shoptet "Více" overflow button */
  .menu-helper[data-testid="hamburgerMenu"] {
    display: none !important;
  }

  .br-mh-phone a.project-phone,
  .br-mh-actions .btn-icon,
  .br-mh-actions .cart-count {
    color: #fff !important;
  }

  .br-mh-phone .phone-hours {
    color: #b7b7b7 !important;
  }

  .br-mh-search .custom-search-input {
    color: #1D1D1B;
  }

  .br-mh-search .custom-search-input::placeholder {
    color: #a8a8a8;
  }
}

/* Menu zalamování – větší mezery když se položky zalamují na 2. řádek */
@media (min-width: 769px) {
  nav#navigation.menu-is-wrapped {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
  }
}

/* ================================================
   NAV BOTTOM LINE + LED HERO BANNER
================================================= */


/* Banner */
.led-hero-banner {
  width: 100%;
  background: linear-gradient(120deg, #1D1D1B 0%, #2a2a28 50%, #1D1D1B 100%);
  margin-top: -24px;
  padding: 40px 24px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.led-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Levá – text */
.led-hero-text {
  flex: 1 1 auto;
  max-width: 560px;
}

.led-hero-tag {
  display: inline-block;
  background: rgba(213, 17, 24, 0.15);
  color: #D51118;
  border: 1px solid rgba(213, 17, 24, 0.4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.led-hero-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 12px 0;
  text-shadow: 0 0 30px rgba(213, 17, 24, 0.25);
}

.led-hero-sub {
  font-size: 15px;
  color: #94a3b8;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.led-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.led-btn-primary {
  display: inline-block;
  background: #D51118;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.led-btn-primary:hover {
  background: #b00e14;
}

.led-btn-outline {
  display: inline-block;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.4);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.led-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255,255,255,0.7);
}

/* Pravá – fotka */
.led-hero-visual {
  flex: 0 0 auto;
  position: relative;
  max-width: 520px;
  width: 100%;
}

.led-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
}

/* Gradient overlay – plynulé splývání fotky s tmavým pozadím banneru */
.led-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    #1D1D1B 0%,
    rgba(29,29,27,0.25) 25%,
    transparent 5%
  );
  pointer-events: none;
  z-index: 1;
}

/* Mobil */
@media (max-width: 768px) {
  .led-hero-content {
    flex-direction: column;
    text-align: center;
  }

  .led-hero-title {
    font-size: 22px;
  }

  .led-hero-btns {
    justify-content: center;
  }

  .led-hero-visual {
    display: none;
  }
}

/* ==========================================================
   BRILED.cz – HP Tiles (liquid glass)
   ========================================================== */

/* ── Keyframe ──────────────────────────────────────────────── */
@keyframes brb-tile-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section ───────────────────────────────────────────────── */
#brb-tiles {
  background: transparent;
  margin-top: 36px;
  padding: 0 48px 52px;
  box-sizing: border-box;
}

/* ── Grid ──────────────────────────────────────────────────── */
#brb-tiles .brb-tiles-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ── Tile ──────────────────────────────────────────────────── */
#brb-tiles .brb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 14px;
  padding: 36px 24px;
  background: linear-gradient(145deg, #242424, #2f2f2f);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 2px solid rgba(214,17,24,0.0);
  border-radius: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, border-top-color 0.25s, transform 0.22s, box-shadow 0.25s;
  opacity: 0;
  animation: brb-tile-in 0.7s ease both;
}

#brb-tiles .brb-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--tile-hover-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.45s ease, transform 0.65s ease;
}

#brb-tiles .brb-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(20,20,20,0.10), rgba(20,20,20,0.45));
  opacity: 0;
  transition: opacity 0.35s ease;
}

#brb-tiles .brb-tile > * {
  position: relative;
  z-index: 2;
}
#brb-tiles .brb-tile:nth-child(1) { animation-delay: 0.10s; }
#brb-tiles .brb-tile:nth-child(2) { animation-delay: 0.20s; }
#brb-tiles .brb-tile:nth-child(3) { animation-delay: 0.30s; }
#brb-tiles .brb-tile:nth-child(4) { animation-delay: 0.40s; }
#brb-tiles .brb-tile:nth-child(5) { animation-delay: 0.50s; }
#brb-tiles .brb-tile:nth-child(6) { animation-delay: 0.60s; }

#brb-tiles .brb-tile:hover {
  background: linear-gradient(145deg, #2a2a2a, #373737);
  border-color: rgba(214,17,24,0.35);
  border-top-color: #D61118;
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(214,17,24,0.20);
  color: #ffffff;
  text-decoration: none;
}

#brb-tiles .brb-tile.brb-tile--indoor:hover::before {
  opacity: 1;
  transform: scale(1);
}

#brb-tiles .brb-tile.brb-tile--indoor:hover::after {
  opacity: 1;
}

/* ── Indoor hover: ikona zmizí, label dostane glass pill ───── */
#brb-tiles .brb-tile--indoor:hover .brb-tile-icon {
  opacity: 0;
  transform: translateY(-10px);
}
#brb-tiles .brb-tile--indoor:hover .brb-tile-label {
  padding: 5px 16px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.28);
  color: #ffffff;
}

/* ── Icon box ──────────────────────────────────────────────── */
#brb-tiles .brb-tile-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  transition: color 0.2s, background 0.2s, border-color 0.2s, opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
#brb-tiles .brb-tile:hover .brb-tile-icon {
  color: #D61118;
  background: rgba(214,17,24,0.10);
  border-color: rgba(214,17,24,0.25);
}
#brb-tiles .brb-tile-icon svg {
  width: 26px;
  height: 26px;
}

/* ── Label ─────────────────────────────────────────────────── */
#brb-tiles .brb-tile-label {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(255,255,255,0.92);
  padding: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: color 0.2s, padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
#brb-tiles .brb-tile:hover .brb-tile-label {
  color: #ffffff;
}

/* ── CTA ───────────────────────────────────────────────────── */
#brb-tiles .brb-tile-cta {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: color 0.2s, letter-spacing 0.2s;
}
#brb-tiles .brb-tile:hover .brb-tile-cta {
  color: #D61118;
  letter-spacing: 0.20em;
}

/* ── Tablet 768–991px ──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  #brb-tiles { padding: 0 36px 40px; }
  #brb-tiles .brb-tile { padding: 28px 20px; }

  /* br-mh-phone – tablet: menší písmo, povolí zalomení */
  .br-mh-phone {
    flex-wrap: wrap;
    gap: 8px;
  }
  header#header .br-mh-box-1 > span:first-child,
  header#header .br-mh-phone a.project-phone {
    font-size: 13px !important;
  }
  header#header .br-mh-phone .phone-hours,
  header#header .br-mh-phone .phone-store {
    font-size: 12px !important;
  }
}

/* ── Mobile < 768px ────────────────────────────────────────── */
@media (max-width: 767px) {
  #brb-tiles { padding: 0 16px 32px; }
  #brb-tiles .brb-tiles-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #brb-tiles .brb-tile { padding: 24px 16px; gap: 10px; }
  #brb-tiles .brb-tile-icon { width: 44px; height: 44px; }
  #brb-tiles .brb-tile-icon svg { width: 22px; height: 22px; }
  #brb-tiles .brb-tile-label { font-size: 12px; }
  #brb-tiles .brb-tile-cta { font-size: 9px; }
}

/* === TRVALE SKRYTÉ SEKCE ===
   #products-1 je záměrně skrytý. VSE V94.js (initRotatingProduct) ho
   také skrývá inline stylem (target.style.display="none") a používá
   jeho produkty jako datový zdroj pro rotating-product widget.
   Žádný kód ho nikde neodskrývá.
   → main akce V24.css je dead code, pokud tato pravidla platí.
   → Před smazáním ověřit na live Shoptetu. Nemazat bez explicitního svolení. */
#products-1 {
  display: none !important;
}
.welcome-wrapper {
  display: none !important;
}

/* === AUDIT OPRAVY — brand colors === */

/* K3: Cena produktu — červená brand color */
.price-final,
.price-final-holder {
  color: #D61118 !important;
}

/* S2: Taby produktu — výchozí bílé, hover a aktivní červené */
.shp-tab-link {
  color: #ffffff;
  transition: color 0.2s ease;
}
.shp-tab-link:hover {
  color: #D61119;
}
.shp-tab.active .shp-tab-link {
  color: #D61118 !important;
  border-left: 3px solid #D61118;
  padding-left: 8px;
  font-weight: 600;
}

/* Skrytí Google Translate injektovaného elementu */
#gtx-trans { display: none !important; }

/* =========================================================
   GLOBÁLNÍ — názvy a obrázky produktů + kategorií
   ========================================================= */

/* Černý text názvů produktů */
.product .product-name a,
.product .p-name a,
.product .descr a.name,
.product-name {
  color: #1D1D1B !important;
}

/* Zaoblení obrázků produktů */
.product .product-image img,
.product img {
  border-radius: 8px;
}

/* Názvy podkategorií (subcategories s obrázkem) */
.subcategories.with-image a {
  text-decoration: none !important;
}
.subcategories.with-image .text {
  color: #1D1D1B !important;
}
.subcategories.with-image a:hover .text,
.subcategories.with-image a:active .text {
  color: #D61118 !important;
}

/* Zaoblení obrázků kategorií — overflow:hidden na kontejneru ořízne i bílé PNG pozadí */
.subcategories.with-image .image {
  display: inline-block !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  line-height: 0 !important;
  height: 70px !important;
}

.subcategories.with-image img {
  border-radius: 0 !important;
}

/* =========================================================
   STRÁNKY KATEGORIÍ — perex + filtr
   ========================================================= */

/* Perex — černý text */
.category-perex,
.category-perex p,
.category-perex span {
  color: #1D1D1B !important;
}

/* Perex — tučný text černý */
.category-perex strong,
.category-perex b {
  color: #1D1D1B !important;
}

/* Perex — červené odkazy */
.category-perex a {
  color: #D61118 !important;
  font-weight: normal;
}

/* Perex — hover/active odkaz: tučná červená */
.category-perex a:hover,
.category-perex a:active {
  color: #D61118 !important;
  font-weight: bold;
}


/* === Nahoru + Načíst 12 dalších + Pagination links === */
.goToTop__button,
.loadMore__button,
a.pagination__link,
.pagination__link--last {
  color: #1D1D1B !important;
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
}

.goToTop__button:hover,
.loadMore__button:hover,
a.pagination__link:hover,
.pagination__link--last:hover {
  color: #ffffff !important;
  background: #D61118 !important;
  border-color: #D61118 !important;
}

/* === Aktuální stránka — bílý text === */
.pagination__currentPage {
  color: #ffffff !important;
}

/* === Category content wrapper — center in flex parent === */
.category-content-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === Produktové karty: bez obvodové linky === */
#products .product {
  border: none !important;
}

/* ================================================
   PRÁZDNÝ KOŠÍK
================================================= */

/* Sjednotit pozadí celé stránky – bílá plocha pod contentem */
body {
  background-color: #1D1D1B;
}

/* Košík & ordering process → viz css/kosik.css */

/* ================================================
   LOGIN PAGE – page-scoped styles
   Scope: body.dklab-login-page  (full-page /login/)
          .dklab-login-context   (popup dialog#login)
   Přidávány dynamicky přes VSE V94.js → initLoginContext()
================================================= */

/* 1. Breadcrumbs – skrýt pouze na full-page loginu */
body.dklab-login-page .breadcrumbs.navigation-home-icon-wrapper {
  display: none !important;
}

/* 2. h1 – bílý text na full-page loginu */
body.dklab-login-page h1 {
  color: #ffffff;
}

/* 3. Inputy – odebrat modré zvýraznění browseru při focusu */
body.dklab-login-page .form-control:focus,
body.dklab-login-page .form-control:active,
.dklab-login-context .form-control:focus,
.dklab-login-context .form-control:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: #888888 !important;
  -webkit-tap-highlight-color: transparent;
}

/* Autofill – odebrat modré pozadí */
body.dklab-login-page .form-control:-webkit-autofill,
body.dklab-login-page .form-control:-webkit-autofill:hover,
body.dklab-login-page .form-control:-webkit-autofill:focus,
.dklab-login-context .form-control:-webkit-autofill,
.dklab-login-context .form-control:-webkit-autofill:hover,
.dklab-login-context .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1D1D1B !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 4. Password helper – černá bold, hover červený */
body.dklab-login-page .password-helper a,
.dklab-login-context .password-helper a {
  color: #1D1D1B;
  font-weight: 700;
  text-decoration: none;
}

body.dklab-login-page .password-helper a:hover,
body.dklab-login-page .password-helper a:focus,
body.dklab-login-page .password-helper a:active,
.dklab-login-context .password-helper a:hover,
.dklab-login-context .password-helper a:focus,
.dklab-login-context .password-helper a:active {
  color: #D61118;
  text-decoration: none;
}

/* toggle-window-arr + password-helper – černá/červená POUZE pokud je pozadí bílé
   (dialog bez .dklab-login-context = výchozí Shoptet bílé bg) */
dialog#login:not(.dklab-login-context) .btn.toggle-window-arr {
  color: #1D1D1B;
}
dialog#login:not(.dklab-login-context) .btn.toggle-window-arr:hover,
dialog#login:not(.dklab-login-context) .btn.toggle-window-arr:active {
  color: #D61118;
}

dialog#login:not(.dklab-login-context) .password-helper a {
  color: #1D1D1B;
  font-weight: 700;
  text-decoration: none;
}
dialog#login:not(.dklab-login-context) .password-helper a:hover,
dialog#login:not(.dklab-login-context) .password-helper a:focus,
dialog#login:not(.dklab-login-context) .password-helper a:active {
  color: #D61118;
  text-decoration: none;
}

/* 5. Tlačítko „Přihlásit se" – červené, bez modrého overlay */
body.dklab-login-page .btn-login,
.dklab-login-context .btn-login {
  background-color: #D61118 !important;
  border-color: #D61118 !important;
  color: #ffffff !important;
}

body.dklab-login-page .btn-login:hover,
body.dklab-login-page .btn-login:focus,
.dklab-login-context .btn-login:hover,
.dklab-login-context .btn-login:focus {
  background-color: #b50e13 !important;
  border-color: #b50e13 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 6. Divider „nebo" – bílý text */
body.dklab-login-page .social-login-buttons-divider span,
.dklab-login-context .social-login-buttons-divider span {
  color: #ffffff;
}

/* 7. Pozadí login dialogu – tmavé #1D1D1B */
.dklab-login-context {
  background-color: #1D1D1B !important;
  color: #ffffff;
}

/* 8. Nadpis h2 – bílý text */
.dklab-login-context .dialog__heading--login,
.dklab-login-context #loginHeading {
  color: #000000;
}

/* 9. Popisky a texty uvnitř – čitelné na tmavém pozadí */
.dklab-login-context label,
.dklab-login-context .form-group label,
.dklab-login-context p,
.dklab-login-context .registration-info {
  color: #ffffff;
}

/* 10. Social login buttony – vedle sebe v jednom řádku */
.dklab-login-context .social-login-buttons {
  display: flex !important;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}

.dklab-login-context .social-login-buttons .login-btn {
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Fallback: na úzkých šířkách pod sebe */
@media (max-width: 480px) {
  .dklab-login-context .social-login-buttons {
    flex-direction: column;
  }

  .dklab-login-context .social-login-buttons .login-btn {
    flex: unset;
  }
}

/* ================================================
   SEARCH PAGE (body.type-search) — layout & barvy
   Scopováno výhradně na type-search, nesmí zasáhnout jiné stránky.
================================================= */

/* A. Skrýt text „Vyhledávání" v breadcrumbs jen na desktopu */
@media (min-width: 992px) {
  body.type-search #navigation-1 span[itemprop="name"][data-title="Vyhledávání"] {
    display: none;
  }
}

/* B. Nadpis výsledků vyhledávání */
body.type-search h2 {
  color: #ffffff;
}
body.type-search h2 strong.highlight {
  color: #D61118;
}

/* C. Blok Kategorie */
body.type-search #search-group-categories h4 {
  color: #ffffff;
}
body.type-search #search-group-categories ul li::marker {
  color: #D61118;
}
body.type-search #search-group-categories a[data-testid="itemLink"] {
  color: #ffffff;
  text-decoration: none;
}
body.type-search #search-group-categories a[data-testid="itemLink"]:hover {
  color: #D61118;
}
body.type-search #search-group-categories .display-results-group {
  color: #D61118;
}

/* D. Blok Články */
body.type-search #search-group-articles h4 {
  color: #ffffff;
}
body.type-search #search-group-articles ul li::marker {
  color: #ffffff;
}
body.type-search #search-group-articles a[data-testid="itemLink"] {
  color: #ffffff;
  text-decoration: none;
}
body.type-search #search-group-articles a[data-testid="itemLink"]:hover {
  color: #D61118;
}

/* E. Nadpis Produkty */
body.type-search #productsListHeading {
  color: #ffffff;
}

/* F. Highlight-product fix pro search stránku
   Stejná logika jako u body.type-category (řádky ~1482–1623).
   Na search stránce je #products.products.products-block (bez třídy products-page). */
@media (min-width: 992px) {
  @supports (display: grid) {

    body.type-search #products.products-block {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-flow: row dense;
      gap: 30px;
    }

    body.type-search #products.products-block > .product {
      float: none !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      clear: none !important;
      min-width: 0;
    }

    /* zrušit "široký" highlight -> vždy jen 1 sloupec */
    body.type-search #products.products-block > .product.highlight-product,
    body.type-search #products.products-block > .product.col-md-8 {
      grid-column: span 1 !important;
    }

    body.type-search #products.products-block > .clearfix,
    body.type-search #products.products-block > .clear {
      display: none !important;
    }

    body.type-search #products.products-block > .product.highlight-product {
      display: block !important;
      position: relative;
    }

    body.type-search #products.products-block > .product.highlight-product .inner {
      display: block !important;
    }

    body.type-search #products.products-block > .product.highlight-product .img,
    body.type-search #products.products-block > .product.highlight-product .descr {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    body.type-search #products.products-block > .product.highlight-product .prices > [class*="col-"] {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    body.type-search #products.products-block > .product.highlight-product::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.06);
      pointer-events: none;
    }

    body.type-search #products.products-block > .product.highlight-product .descr {
      text-align: center;
    }

    body.type-search #products.products-block > .product.highlight-product .descr a.name {
      display: block;
    }

    body.type-search #products.products-block > .product.highlight-product .short-descr {
      margin: 8px 0 10px;
    }

    body.type-search #products.products-block > .product.highlight-product .prices.row {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    body.type-search #products.products-block > .product.highlight-product .prices.row > [class*="col-"] {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: center;
    }

    body.type-search #products.products-block > .product.highlight-product .price-additional {
      margin-top: 6px;
    }

    body.type-search #products.products-block > .product.highlight-product .price.price-final {
      margin-top: 4px;
    }

    body.type-search #products.products-block > .product.highlight-product .tools-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    }

    body.type-search #products.products-block > .product.highlight-product .tools,
    body.type-search #products.products-block > .product.highlight-product form.pr-action {
      display: flex;
      justify-content: center;
    }

    body.type-search #products.products-block > .product.highlight-product .add-to-cart-button {
      margin-top: 6px;
    }

    body.type-search #products.products-block > .product.highlight-product .availability {
      text-align: center;
      margin-top: 8px;
    }

    body.type-search #products.products-block > .product.highlight-product .product-link.visible-lg-inline {
      display: none !important;
    }

  }
}

/* ===================================================================
   KLIENTSKÉ CENTRUM — dark theme overrides
   Scope: body.in-klient  = pouze /klient/ (ne subpages)
          body.customer-page = celá klientská sekce (/klient/ + subpages)
   Selektory záměrně úzké — žádný globální přepis .btn-primary, .content-inner atd.
   ================================================================== */

/* 1. Skrýt breadcrumb titulek "Klientské centrum" — jen desktop, jen /klient/ */
@media (min-width: 992px) {
  body.in-klient #navigation-1[data-testid="breadcrumbsLastLevel"] span[data-title="Klientské centrum"] {
    display: none;
  }
}

/* 2. Bílý text v hlavním obsahu klientské sekce */
body.customer-page #content .content-inner h1,
body.customer-page #content .content-inner p {
  color: #ffffff;
}

/* 3–5. Klientská navigace v sidebaru (.client-center-box)
   — scope přes [data-testid="boxCustomerCenterMenu"] alias .client-center-box → nemůže uniknout jinam */

/* 5. Ostatní položky: bílý text, hover červený */
body.customer-page .client-center-box ul li a {
  color: #ffffff;
  text-decoration: none;
}

body.customer-page .client-center-box ul li a:hover {
  color: #D61118;
  text-decoration: none;
}

/* 3. Aktivní položka (jméno uživatele): bílá + bold zachován */
body.customer-page .client-center-box li.active > a,
body.customer-page .client-center-box li.active > a strong {
  color: #ffffff;
}

/* 4. Tlačítko "Odhlásit se" — vizuálně stejné jako .btn.btn-primary.btn-sm v tmavém designu */
body.customer-page .client-center-box li.logout > a.btn {
  display: inline-block;
  background-color: #D61118;
  color: #ffffff;
  border-color: #D61118;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

body.customer-page .client-center-box li.logout > a.btn:hover {
  background-color: #b00e14;
  border-color: #b00e14;
  color: #ffffff;
  text-decoration: none;
}

/* 6. Box sekce klientské administrace — styl odpovídající košíkovému fieldset
   Zdroj: body.in-krok-2 v CDN main CSS (padding-bottom:60px, border-bottom, margin-bottom:60px)
   Scope: body.customer-page #content — nikdy neovlivní checkout (body.ordering-process)
   #content v selektoru nutný pro překonání CDN pravidla s vyšší specificitou pro margin-bottom */
body.customer-page #content .box.box-sm.box-bg-default {
  padding-bottom: 60px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 60px;
}

/* Nadpis sekce: tučný uppercase — rámeček přesunut z h4 na fieldset (jako v košíku) */
body.customer-page #content .box.box-sm.box-bg-default h4 {
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: none;
}

/* ===================================================================
   NASTAVENÍ ÚČTU — dark theme overrides pro .box.box-sm.box-bg-default
   Scope: body.in-nastaveni .box.box-sm.box-bg-default
   Vzor: body.in-krok-2 v kosik.css — stejné principy, stejné selektory
   =================================================================== */

/* 1. Bílý text uvnitř bloku (label, span, headings, obecný text) */
body.in-nastaveni .box.box-sm.box-bg-default label,
body.in-nastaveni .box.box-sm.box-bg-default span,
body.in-nastaveni .box.box-sm.box-bg-default p,
body.in-nastaveni .box.box-sm.box-bg-default h3,
body.in-nastaveni .box.box-sm.box-bg-default h4,
body.in-nastaveni .box.box-sm.box-bg-default h5 {
  color: #ffffff !important;
}

/* 2. Bold prvky – zůstávají bold a bílé */
body.in-nastaveni .box.box-sm.box-bg-default strong,
body.in-nastaveni .box.box-sm.box-bg-default b {
  color: #ffffff !important;
  font-weight: bold !important;
}

/* 3. Input fieldy: bílé pozadí, tmavý text, rámeček */
body.in-nastaveni .box.box-sm.box-bg-default input[type="text"],
body.in-nastaveni .box.box-sm.box-bg-default input[type="email"],
body.in-nastaveni .box.box-sm.box-bg-default input[type="tel"],
body.in-nastaveni .box.box-sm.box-bg-default input[type="password"] {
  background-color: #ffffff !important;
  color: #1D1D1B !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px;
  padding: 8px 12px;
}

/* Focus – bez modrého overlaye (outline + box-shadow) */
body.in-nastaveni .box.box-sm.box-bg-default input[type="text"]:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="email"]:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="tel"]:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="password"]:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="text"]:focus-visible,
body.in-nastaveni .box.box-sm.box-bg-default input[type="email"]:focus-visible,
body.in-nastaveni .box.box-sm.box-bg-default input[type="tel"]:focus-visible,
body.in-nastaveni .box.box-sm.box-bg-default input[type="password"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #888888 !important;
  background-color: #ffffff !important;
}

/* Autofill Chrome – bez modrého/světlého pozadí */
body.in-nastaveni .box.box-sm.box-bg-default input[type="text"]:-webkit-autofill,
body.in-nastaveni .box.box-sm.box-bg-default input[type="email"]:-webkit-autofill,
body.in-nastaveni .box.box-sm.box-bg-default input[type="tel"]:-webkit-autofill,
body.in-nastaveni .box.box-sm.box-bg-default input[type="password"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1D1D1B !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

body.in-nastaveni .box.box-sm.box-bg-default input[type="text"]:-webkit-autofill:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="email"]:-webkit-autofill:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="tel"]:-webkit-autofill:focus,
body.in-nastaveni .box.box-sm.box-bg-default input[type="password"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1D1D1B !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* Select fieldy */
body.in-nastaveni .box.box-sm.box-bg-default select {
  background-color: #ffffff !important;
  color: #1D1D1B !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px;
  padding: 8px 12px;
}

body.in-nastaveni .box.box-sm.box-bg-default select:focus,
body.in-nastaveni .box.box-sm.box-bg-default select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #888888 !important;
}

/* Textarea */
body.in-nastaveni .box.box-sm.box-bg-default textarea:focus,
body.in-nastaveni .box.box-sm.box-bg-default textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 4. Country flag label (telefonní pole) – bílý text (zavřený selektor) */
body.in-nastaveni .box.box-sm.box-bg-default .shp-flag-label,
body.in-nastaveni .box.box-sm.box-bg-default .shp-flag-label .shp-flag-name {
  color: #ffffff !important;
}

/* Šipka v country selectu – bílá (CSS border triangle na ::before) */
body.in-nastaveni .box.box-sm.box-bg-default .shp-flag-label::before {
  border-top-color: #ffffff !important;
}

/* Otevřený dropdown – položky mají světlé pozadí, text tmavý */
body.in-nastaveni .box.box-sm.box-bg-default .country-flags-inner .country-flag:not(.selected) .shp-flag-name,
body.in-nastaveni .box.box-sm.box-bg-default .country-flags-inner .country-flag:not(.selected) .shp-flag-label {
  color: #1D1D1B !important;
}

/* ===================================================================
   NASTAVENÍ ÚČTU — custom checkbox (kulatý přepínač)
   Scope: body.in-nastaveni — cílí jen na #company-shopping a #sendNewsletter
   Vzor: body.in-krok-2 v kosik.css — stejný pattern, stejné principy
   =================================================================== */

/* Positioning context pro absolutně umístěný input */
body.in-nastaveni .form-group.company-shopping,
body.in-nastaveni .stay-in-touch .form-group {
  position: relative;
}

/* Plná neutralizace nativního checkbox inputu —
   appearance: none + opacity: 0 + position: absolute + pointer-events: none
   zabraňují jakémukoli nativnímu vykreslení i překryvu s custom kolečkem */
body.in-nastaveni #company-shopping,
body.in-nastaveni #sendNewsletter {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
}

/* Label: flex layout, bílý text, klikací plocha */
body.in-nastaveni #company-shopping + label.whole-width,
body.in-nastaveni #sendNewsletter + label.whole-width {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  cursor: pointer !important;
  color: #ffffff !important;
  gap: 10px;
  user-select: none;
}

/* Vlastní kolečko — label::before */
body.in-nastaveni #company-shopping + label.whole-width::before,
body.in-nastaveni #sendNewsletter + label.whole-width::before {
  content: '' !important;
  flex-shrink: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Checked: červená tečka uvnitř kolečka pomocí radial-gradient */
body.in-nastaveni #company-shopping:checked + label.whole-width::before,
body.in-nastaveni #sendNewsletter:checked + label.whole-width::before {
  border-color: #ffffff !important;
  background: radial-gradient(circle at center, #D61118 44%, transparent 45%) !important;
}

/* Explicitně zrušit ::after — nesmí přidávat druhý marker */
body.in-nastaveni #company-shopping + label.whole-width::after,
body.in-nastaveni #sendNewsletter + label.whole-width::after {
  content: none !important;
  display: none !important;
}

/* Focus ring pro accessibility */
body.in-nastaveni #company-shopping:focus-visible + label.whole-width::before,
body.in-nastaveni #sendNewsletter:focus-visible + label.whole-width::before {
  border-color: #D61118 !important;
  box-shadow: 0 0 0 2px rgba(214, 17, 24, 0.25) !important;
}

/* ===================================================================
   NASTAVENÍ ÚČTU — tlačítka (Přidat novou adresu + Uložit)
   Scope: body.in-nastaveni — stejný vizuální styl jako přihlašovací btn-login
   Vzor: body.dklab-login-page .btn-login v tomto souboru
   =================================================================== */

body.in-nastaveni a.btn.btn-secondary,
body.in-nastaveni input[type="submit"].btn-login {
  background-color: #D61118 !important;
  border-color: #D61118 !important;
  color: #ffffff !important;
  text-decoration: none;
}

body.in-nastaveni a.btn.btn-secondary:hover,
body.in-nastaveni a.btn.btn-secondary:focus,
body.in-nastaveni input[type="submit"].btn-login:hover,
body.in-nastaveni input[type="submit"].btn-login:focus {
  background-color: #b50e13 !important;
  border-color: #b50e13 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===================================================================
   SIDEBAR FIX — klientská sekce
   Příčina: Shoptet CDN CSS (main-09.less) skrývá .sidebar s display:none !important
   pro .one-column-body šablonu. dkfilter.css přidává vlastní hide rule.
   Oba nelze překonat bez !important — jde o CÍLENÝ single-property override,
   ne blanket hack. Scope: body.customer-page → nikdy neovlivní zbytek webu.
   ================================================================== */
body.customer-page #content-wrapper aside.sidebar.sidebar-left {
  display: block !important;
}

/* ===================================================================
   MOJE OBJEDNÁVKY — dark theme tabulky objednávek
   Scope: body.in-objednavky — pouze stránka /klient/objednavky/
   thead se nedotýkáme — jen tbody datové řádky
   ================================================================== */

/* Všechen text v řádcích bíle jako základ */
body.in-objednavky table.customer-orders tbody tr td {
  color: #ffffff;
}

/* Kód objednávky — odkaz + text odkazu červeně */
body.in-objednavky table.customer-orders tbody tr td a[data-testid="linkCustomerOrder"],
body.in-objednavky table.customer-orders tbody tr td a[data-testid="linkCustomerOrder"] strong {
  color: #D61118;
}
body.in-objednavky table.customer-orders tbody tr td a[data-testid="linkCustomerOrder"]:hover {
  color: #b00e14;
  text-decoration: underline;
}

/* Ceny (Cena bez DPH + Cena celkem) — červeně */
body.in-objednavky table.customer-orders tbody tr td.cell--price,
body.in-objednavky table.customer-orders tbody tr td.cell--price strong {
  color: #D61118;
}

/* Sledování zásilky — odkaz červeně (plain text dědí bílou z td) */
body.in-objednavky table.customer-orders tbody tr td a:not([data-testid="linkCustomerOrder"]) {
  color: #D61118;
}
body.in-objednavky table.customer-orders tbody tr td a:not([data-testid="linkCustomerOrder"]):hover {
  color: #b00e14;
  text-decoration: underline;
}

/* Aktuální stránka v paginaci — bílý text */
body.in-objednavky .pagination .current {
  color: #ffffff;
}

/* Zaoblení hlavičky tabulky objednávek — pouze desktop
   Technika: border-collapse:separate + border-spacing:0 oddělí buňky pro border-radius,
   sjednocené pozadí a nulové vnitřní hranice způsobí, že th splývají v jeden vizuální pruh.
   Zaoblení jen vnějších rohů (first-child / last-child) — ne každá buňka zvlášť. */
@media (min-width: 992px) {
  body.in-objednavky table.customer-orders {
    border-collapse: separate;
    border-spacing: 0;
  }
  body.in-objednavky table.customer-orders thead th {
    background-color: #1D1D1B;
    color: #ffffff;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  body.in-objednavky table.customer-orders thead th:first-child {
    border-top-left-radius: 6px;
  }
  body.in-objednavky table.customer-orders thead th:last-child {
    border-top-right-radius: 6px;
  }
}

/* =====================================================
   MOBILNÍ PAGINACE — /klient/objednavky/
   .pagination-total nahoru, .pagination (.current) dolů
   max-width na .pagination-total nastavuje JS (alignOrdersPagination)
   Zarovnání .current na začátek "Sledování zásilky" řeší JS (alignOrdersPaginationCurrent)
   ===================================================== */
@media (max-width: 767px) {
  body.in-objednavky .pagination-wrapper {
    display: flex;
    flex-direction: column;
  }
  body.in-objednavky .pagination-wrapper .pagination {
    order: 2;
    justify-content: flex-start;
    text-align: left;
  }
  body.in-objednavky .pagination-wrapper p.pagination-total {
    order: 1;
    box-sizing: border-box;
  }
}

/* ===================================================================
   DETAIL OBJEDNÁVKY — dark theme overrides
   Scope: body.briled-order-detail — přidáno JS funkcí initOrderDetail()
          Aktivuje se jen na stránce detailu objednávky (přítomnost .table-order-details).
          Nemůže uniknout na seznam objednávek ani jiné stránky webu.
   ================================================================== */

/* === Nadpisy h2 a h4 === */
body.briled-order-detail .content-inner h2,
body.briled-order-detail .content-inner h4 {
  color: #ffffff;
}

/* === Blok s datem, stavem a (volitelně) trackingem — bílý text === */
body.briled-order-detail .content-inner p {
  color: #ffffff;
}

body.briled-order-detail .content-inner p strong {
  color: #ffffff;
}

/* Tracking číslo zásilky — červeně bold (třída přidána JS) */
body.briled-order-detail .briled-tracking-number {
  color: #D61118;
  font-weight: 700;
}

/* === Tlačítko Znovu nakoupit — replikace checkout stylu (body.in-krok-2 #submit-order) === */
body.briled-order-detail a.btn.briled-reorder-btn {
  display: inline-block;
  background: transparent;
  color: #D61118;
  border: 2px solid #D61118;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 24px;
  text-decoration: none;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.briled-order-detail a.btn.briled-reorder-btn:hover {
  background: #ffffff;
  color: #1D1D1B;
  border-color: transparent;
  text-decoration: none;
}

body.briled-order-detail a.btn.briled-reorder-btn:focus,
body.briled-order-detail a.btn.briled-reorder-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

body.briled-order-detail a.btn.briled-reorder-btn:active {
  background: #ffffff;
  color: #1D1D1B;
  border-color: transparent;
}

/* === Adresní bloky (Fakturační, Doručovací adresa) === */
body.briled-order-detail .content-inner .row {
  color: #ffffff;
}

/* E-mailový odkaz červeně */
body.briled-order-detail .content-inner .row a[href^="mailto:"] {
  color: #D61118;
  text-decoration: none;
}

body.briled-order-detail .content-inner .row a[href^="mailto:"]:hover {
  color: #b00e14;
  text-decoration: underline;
}

/* === Blok Poznámky — text bold bílý (třída přidána JS) === */
body.briled-order-detail .briled-note-block p {
  color: #ffffff;
  font-weight: 700;
}

/* === Tabulka detailu objednávky — thead (stejný styl jako customer-orders na /objednavky/) === */
@media (min-width: 992px) {
  body.briled-order-detail table.table-order-details {
    border-collapse: separate;
    border-spacing: 0;
  }

  body.briled-order-detail table.table-order-details thead th {
    background-color: #1D1D1B;
    color: #ffffff;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  body.briled-order-detail table.table-order-details thead th:first-child {
    border-top-left-radius: 6px;
  }

  body.briled-order-detail table.table-order-details thead th:last-child {
    border-top-right-radius: 6px;
  }
}

/* === Tabulka detailu objednávky — tbody === */

/* Základní bílý text v buňkách */
body.briled-order-detail table.table-order-details tbody td {
  color: #ffffff;
}

/* Mobilní labely čitelně šedě (nezaniknou v bílé ani červené) */
body.briled-order-detail table.table-order-details .client-table-heading {
  color: #aaaaaa;
}

/* Cenové buňky — červeně */
body.briled-order-detail table.table-order-details tbody td.cell--price {
  color: #D61118;
}

/* Strong v cenových buňkách — červeně bold */
body.briled-order-detail table.table-order-details tbody td.cell--price strong {
  color: #D61118;
  font-weight: 700;
}

/* Odkaz na produkt červeně */
body.briled-order-detail table.table-order-details tbody td a.p-name__itemLink {
  color: #D61118;
  text-decoration: none;
}

body.briled-order-detail table.table-order-details tbody td a.p-name__itemLink:hover {
  color: #b00e14;
  text-decoration: underline;
}

/* Kód produktu a jeho label — čitelná šedá na tmavém pozadí */
body.briled-order-detail table.table-order-details tbody .p-name__code,
body.briled-order-detail table.table-order-details tbody .p-name__codeLabel {
  color: #aaaaaa;
}

/* Summary řádek — popisky bílé, hodnoty červené */
body.briled-order-detail table.table-order-details tbody tr.row-summary dt {
  color: #ffffff;
}

body.briled-order-detail table.table-order-details tbody tr.row-summary dd {
  color: #D61118;
}

body.briled-order-detail table.table-order-details tbody tr.row-summary dd strong {
  color: #D61118;
  font-weight: 700;
}

/* ===================================================================
   MOJE DISKUZE U PRODUKTŮ — dark theme tabulky diskuzí
   Scope: body.in-klient-diskuze — pouze stránka /klient/klient-diskuze/
   Vzor: body.in-objednavky + body.briled-order-detail — stejné principy
   ================================================================== */

/* Základní bílý text v řádcích */
body.in-klient-diskuze table.customer-discussions tbody tr td {
  color: #ffffff;
}

/* Mobilní labely (.client-table-heading) — čitelná šedá (jako u table-order-details) */
body.in-klient-diskuze table.customer-discussions .client-table-heading {
  color: #aaaaaa;
}

/* Odkaz na produkt — červeně */
body.in-klient-diskuze table.customer-discussions tbody td a[data-testid="linkCustomerDiscussions"] {
  color: #D61118;
  text-decoration: none;
}

body.in-klient-diskuze table.customer-discussions tbody td a[data-testid="linkCustomerDiscussions"]:hover {
  color: #b00e14;
  text-decoration: underline;
}

/* Tlačítko Smazat — stejný vizuální princip jako briled-reorder-btn (Znovu nakoupit) */
body.in-klient-diskuze a.btn.csrf-post-js[data-testid="buttonUniversalConfirm"] {
  background: transparent;
  color: #D61118;
  border: 2px solid #D61118;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  text-decoration: none;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.in-klient-diskuze a.btn.csrf-post-js[data-testid="buttonUniversalConfirm"]:hover {
  background: #ffffff;
  color: #1D1D1B;
  border-color: transparent;
  text-decoration: none;
}

body.in-klient-diskuze a.btn.csrf-post-js[data-testid="buttonUniversalConfirm"]:focus,
body.in-klient-diskuze a.btn.csrf-post-js[data-testid="buttonUniversalConfirm"]:focus-visible {
  outline: none;
  box-shadow: none;
}

body.in-klient-diskuze a.btn.csrf-post-js[data-testid="buttonUniversalConfirm"]:active {
  background: #ffffff;
  color: #1D1D1B;
  border-color: transparent;
}

/* Produktova diskuze - zruseni modreho overlaye na polich pri hover/focus/active */
body.type-product .discussionContainer.js-discussion-container .form-group:hover,
body.type-product .discussionContainer.js-discussion-container .form-group:focus-within,
body.type-product .discussionContainer.js-discussion-container .js-validated-element-wrapper:hover,
body.type-product .discussionContainer.js-discussion-container .js-validated-element-wrapper:focus-within {
  background: transparent !important;
  box-shadow: none !important;
}

body.type-product .discussionContainer.js-discussion-container input.form-control:hover,
body.type-product .discussionContainer.js-discussion-container input.form-control:focus,
body.type-product .discussionContainer.js-discussion-container input.form-control:focus-visible,
body.type-product .discussionContainer.js-discussion-container input.form-control:active,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:hover,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:focus,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:focus-visible,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:active {
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

body.type-product .discussionContainer.js-discussion-container input.form-control:-webkit-autofill,
body.type-product .discussionContainer.js-discussion-container input.form-control:-webkit-autofill:hover,
body.type-product .discussionContainer.js-discussion-container input.form-control:-webkit-autofill:focus,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:-webkit-autofill,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:-webkit-autofill:hover,
body.type-product .discussionContainer.js-discussion-container textarea.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: none !important;
}

/* Thead — desktop styl shodný s customer-orders a table-order-details */
@media (min-width: 992px) {
  body.in-klient-diskuze table.customer-discussions {
    border-collapse: separate;
    border-spacing: 0;
  }

  body.in-klient-diskuze table.customer-discussions thead th {
    background-color: #1D1D1B;
    color: #ffffff;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  body.in-klient-diskuze table.customer-discussions thead th:first-child {
    border-top-left-radius: 6px;
  }

  body.in-klient-diskuze table.customer-discussions thead th:last-child {
    border-top-right-radius: 6px;
  }
}

/* ===================================================================
   C. MOBILNÍ ZAROVNÁNÍ KLIENTSKÉHO MENU — všechny stránky /klient/
   Sidebar-inner má padding-left: 20px (CDN CSS) → menu box začíná na x=30,
   .content-inner začíná na x=10. Odstraněním padding-left zarovnáme obě hrany.
   Pouze mobilní breakpoint; desktop a tablet beze změny.
   Pozn.: původní diskuze-specifická kompenzace (+20px na content) byla
   nahrazena tímto globálním řešením a odebrána.
   ================================================================== */
@media (max-width: 767px) {
  body.customer-page .sidebar-inner {
    padding-left: 0;
  }
}

/* ===================================================================
   A + B. MOJE SLEVY — dark theme overrides
   Scope: body.in-klient-slevy — pouze /klient/klient-slevy/
   ================================================================== */

/* A1. Nadpisy a tabulkové buňky — bílý text */
body.in-klient-slevy .content-inner h2 {
  color: #ffffff;
}

body.in-klient-slevy .content-inner td,
body.in-klient-slevy .content-inner th {
  color: #ffffff;
}

/* A2. Strong v buňkách — bílý + zachovat bold */
body.in-klient-slevy .content-inner td strong,
body.in-klient-slevy .content-inner th strong {
  color: #ffffff;
  font-weight: bold;
}

/* A3. Peněžní hodnoty — sloupec "Od ceny" (první td v každém řádku Objemových slev) — červená
   Pouze druhá tabulka (ne tableCustomerDiscounts, kde jsou jen procenta / název skupiny).
   Structural selector: td:first-child = vždy "Od ceny" = vždy cena v Kč. */
body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) tbody td:first-child,
body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) tbody td:first-child strong {
  color: #D61118;
}

body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) tbody td:first-child strong {
  font-weight: bold;
}

/* B. thead Objemové slevy — transparentní pozadí, bílý text, zachovat zarovnání */
body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) thead,
body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) thead tr,
body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) thead th {
  background: transparent;
  background-color: transparent;
  color: #ffffff;
}

body.in-klient-slevy .content-inner table:not([data-testid="tableCustomerDiscounts"]) thead th strong {
  color: #ffffff;
  font-weight: bold;
}

/* ============================================
   HEADER SCROLL HIDE — mobil / tablet (≤ 991px)
   Stav at-top  (scrollY ≤ 5): header viditelný
   Stav not-at-top (scrollY > 5): header schovaný
   Scroll nahoru header NEZOBRAZUJE — jen návrat
   úplně nahoru. Desktop (≥ 992px) bez změny.
   Třída br-header-hidden se přidává na <body>
   přes initHeaderScrollBehavior v VSE V94.js.
   ============================================ */
@media (max-width: 991px) {
  /* Plynulá animace — přebíjí Shoptet transition */
  #header {
    transition: transform 0.25s ease !important;
    will-change: transform;
  }

  /* Nahoře: vždy zobrazit, přebít jakékoliv Shoptet hide třídy */
  body:not(.br-header-hidden) #header {
    transform: translateY(0) !important;
  }

  /* Odscrollováno dolů: schovat */
  body.br-header-hidden #header {
    transform: translateY(-100%) !important;
  }
}

/* ============================================
   Ikony dostupnosti — pgf-hero-buy + pgf-delivery-note
   Stav class přidává initAvailabilityIcons() v VSE V94.js
   ============================================ */

/* --- Ikona v hero-buy před span.availability ---
   product-gallery-fix.css již definuje zelené kolečko s fajfkou pro
   .pgf-hero-buy .availability::before (display:inline-flex, align-items:center…)
   — pro is-in-stock tedy jen ponecháváme existující styl beze změny.
   Pro ostatní stavy přebijeme content + barvy, display necháme inline-flex. */

.pgf-hero-buy.is-on-demand span.availability::before {
  content: '?';
  background: transparent;
  color: #facc15;
  border: 2px solid #facc15;
  font-size: 11px;
}

.pgf-hero-buy.is-unavailable span.availability::before {
  content: '✕';
  background: transparent;
  color: #ef4444;
  border: 2px solid #ef4444;
  font-size: 11px;
}

/* --- Ikona v .pgf-delivery-note přes ::before (přebíjí product-gallery-fix.css) --- */
/* is-in-stock: zelená fajfka — zachovává existující styl z product-gallery-fix.css */
.pgf-delivery-note.is-on-demand::before {
  content: '?';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: transparent;
  color: #facc15;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #facc15;
  margin-right: 8px;
  flex-shrink: 0;
}

.pgf-delivery-note.is-unavailable::before {
  content: '✕';
  background: transparent;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #ef4444;
}

/* Barva textu dostupnosti */
.pgf-delivery-note.is-in-stock {
  color: #2C2C2A !important;
}

.pgf-external-availability {
  color: #2C2C2A !important;
}

.pgf-external-availability__label {
  color: #2C2C2A !important;
  opacity: 1 !important;
}

/* Homepage only – content-wrapper-in hidden */
body.in-index .content-wrapper-in {
  display: none;
}

.breadcrumbs.navigation-home-icon-wrapper > span,
.breadcrumbs.navigation-home-icon-wrapper a,
.breadcrumbs.navigation-home-icon-wrapper span[itemprop="name"],
.breadcrumbs.navigation-home-icon-wrapper .navigation-bullet {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  vertical-align: middle;
}